<template>
  <a-card
    title="我的标绘"
    style="position: relative; overflow: hidden; height: 100%"
    :bodyStyle="{ padding: ' 10px 16px' }"
  >
    <a-form-model>
      <a-form-model-item>
        <a-row :gutter="8">
          <a-col :span="8">
            <a-select placeholder="类别">
              <a-select-option value="point"> <a-icon type="ellipsis" /> 点 </a-select-option>
              <a-select-option value="line"> <a-icon type="line" /> 线 </a-select-option>
              <a-select-option value="polygon"> <a-icon type="border" /> 面 </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="16">
            <a-input-search />
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item>
        <a-row :gutter="8">
          <a-col :span="12">
            <a-button type="primary" block @click="handleNew"> <a-icon type="plus" /> 新增标绘图层 </a-button>
          </a-col>
          <a-col :span="12">
            <a-button type="primary" block @click="handleImport"> <a-icon type="plus" /> 数据文件上图 </a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
    </a-form-model>
    <a-list item-layout="vertical" :data-source="data">
      <a-list-item
        slot="renderItem"
        slot-scope="item, index"
        @mouseenter="highlightItem(index)"
        @mouseleave="clearHighlight"
      >
        <!-- eslint-disable-next-line-->
        <template v-for="{ type, text } in actions" slot="actions" v-if="idx == index">
          <span :key="type">
            <a-icon :type="type" />
          </span>
        </template>
        <a-list-item-meta>
          <a slot="title">{{ item }}</a>
          <a-avatar slot="avatar" size="small" icon="environment" />
        </a-list-item-meta>
        <a slot="extra" style="color: inherit"><a-icon type="eye-invisible" /></a>
      </a-list-item>
    </a-list>
    <j-import-modal ref="importModal"></j-import-modal>
    <new-modal ref="newModal"></new-modal>
  </a-card>
</template>

<script>
import JImportModal from '@/components/jeecg/JImportModal.vue'
import NewModal from '@/views/components/NewModal.vue'
import { mixin, mixinDevice } from '@/utils/mixin'
const data = ['重点管控点', '木兰社区（测试）', '秀屿区耕地网格及田长测试数据', '西天尾镇产业园']

export default {
  name: 'SideMenu',
  components: { JImportModal, NewModal },
  mixins: [mixin, mixinDevice],

  data() {
    return {
      data,
      actions: [
        { type: 'download', text: '导出图层' },
        { type: 'tags', text: '图层样式' },
        { type: 'edit', text: '编辑图层' },
        { type: 'delete', text: '删除图层' }
      ],
      idx: null
    }
  },
  methods: {
    handleNew() {
      this.$refs.newModal.show()
    },
    handleImport() {
      this.$refs.importModal.show()
    },
    highlightItem(index) {
      this.idx = index
    },
    clearHighlight() {
      this.idx = null
    },
    onSelect(obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 5px !important;
}
/deep/.ant-list-vertical .ant-list-item-extra {
  margin-left: 20px !important;
}
/deep/.ant-list-vertical .ant-list-item-action {
  margin-top: 6px !important;
}
.ant-list-vertical .ant-list-item-meta,
.ant-list-vertical .ant-list-item-meta-title {
  margin-bottom: 5px !important;
}
</style>
